<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .clock span:not(:nth-child(2n)) {
            background-color: #000;
            color: skyblue;
            width: 30px;
            height: 30px;
            display: inline-block;
            text-align: center;
            line-height: 30px;
        }
    </style>
</head>
<body>
    <div class="clock">
        <span id = 'h'>1</span>
        <span>:</span>
        <span id = 'm'>10</span>
        <span>:</span>
        <span id = 's'>10</span>
    </div>
    <script>
        //获取元素
        var h = document.getElementById('h')
        var m = document.getElementById('m')
        var s = document.getElementById('s')
        var ss = s.innerText
        var mm = m.innerText
        var hh = h.innerText
        //设立定时器,每秒运行一次
        //s--
        //如果s < 0,则m--,s=59
        //如果m < 0 则h--,
        //如果h == 0  m == 0 s ==0 则停止,
        var clockTimeID = setInterval(function(){
            ss--;
            if(hh == 0 && mm == 0 && ss == 0) {
                clearInterval(clockTimeID);
                
            }
            ss = ss < 10&&ss >= 0 ? '0'+ss : ss;
            if(ss<0) {
                mm--;
                mm = mm < 10&&mm >= 0 ? '0'+mm : mm;
                if(mm < 0) {
                    hh--;
                    hh = hh < 10&&hh >= 0 ? '0'+hh : hh;
                    mm = 59
                }
                ss = 59;
            }
            s.innerText = ss
            m.innerText = mm
            h.innerText = hh
        },1000)
    </script>
</body>
</html>